<template>
	<view class="container">
		<scroll-view scroll-y :scroll-with-animation="isTap" scroll-anchoring class="tab-view" :scroll-into-view="scrollView_leftId"
		 :style="{ height: height + 'px', top: top + 'px' }">
			<view :id="`left_${index}`" v-for="(item, index) in superCate" :key="index" class="tab-bar-item"
			 :class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="swichNav">
				<text>{{ item.title }}</text>
			</view>
		</scroll-view>
		<scroll-view @scroll="scroll" scroll-anchoring scroll-y scroll-with-animation class="right-box" :scroll-into-view="scrollView_rightId"
		 :style="{ height: height + 'px', top: top + 'px' }">
			<!--内容部分 start 自定义可删除-->
			<block v-for="(item, index) in superCate" :key="index">
				<t-linkage :distanceTop="distanceTop" :recalc="1" :scrollTop="scrollTop" :index="index" @linkage="linkage">
					<view class="page-view" :id="`right_${index}`">
						<view class="class-box">
							<view class="class-item">
								<view class="class-name">{{ item.title }}</view>
								<image v-if="item.ad_pic" class="class-adv-image" :src="item.ad_pic" mode="widthFix" @click="linkTo(item.ad_url)"></image>
								<view class="g-container">
									<view class="g-box" v-for="(item1, index1) in item.list" :key="index1" @tap.stop="productList(item1)">
										<image :src="item1.icon" class="g-image" />
										<view class="g-title">{{item1.title}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</t-linkage>
			</block>
			<!--内容部分 end 自定义可删除-->
		</scroll-view>

		<!-- #ifdef H5 -->
		<np-tabbar path="/pages/tabbar/cate"></np-tabbar>
		<!-- #endif -->
	</view>
</template>

<script>
	import base from '@/common/base.js'
	export default {
		mixins: [base],
		data() {
			return {
				superCate: [],
				height: 0, //scroll-view高度
				top: 0,
				currentTab: 0, //预设当前项的值
				scrollView_leftId: 'left_0',
				scrollView_rightId: 'right_0',
				scrollTop: 0,
				distanceTop: uni.upx2px(92),
				isScroll: true,
				isTap: true
			};
		},
		onLoad(options) {
			this.superCate = uni.getStorageSync('superCate');
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						let top = 0;
						//#ifdef H5
						top = 44;
						//#endif
						this.height = res.windowHeight;
						this.top = top;
					}
				});
			}, 50);
		},
		watch:{
			globalConfig() {
				if (this.superCate.length == 0) {
					this.superCate = uni.getStorageSync('superCate');
				}
			}
		},
		methods: {
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur;
					this.checkCor();
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function(isScroll) {
				if (!isScroll) {
					this.isScroll = false;
					this.isTap = true;
					if (this.currentTab > 6) {
						this.scrollView_leftId = `left_${this.currentTab - 2}`;
					} else {
						this.scrollView_leftId = `left_0`;
					}
					this.scrollView_rightId = `right_${this.currentTab}`;
				} else {
					this.scrollView_leftId = `left_${this.currentTab}`;
				}
			},
			productList(data) {
				uni.navigateTo({
					url: "/pages/search/search?keyword=" + data.keyword + "&title=" + data.title
				})
			},
			linkTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			scroll(e) {
				//动画时长固定300ms
				if (!this.isScroll) {
					setTimeout(() => {
						this.isScroll = true;
					}, 150);
				} else {
					this.scrollTop = e.detail.scrollTop;
				}
			},
			linkage(e) {
				if (e.isLinkage && e.index != this.currentTab) {
					this.isTap = false;
					this.currentTab = e.index;
					this.checkCor(true);
				}
			}
		}
	}
</script>

<style>


	/* 左侧导航布局 start*/

	.tab-view {
		/* height: 100%; */
		width: 200rpx;
		position: fixed;
		left: 0;
		z-index: 10;
		/* #ifdef H5 */
		padding-bottom: 100rpx;
		/* #endif */
	}

	.tab-bar-item {
		width: 200rpx;
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
	}

	.active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fcfcfc;
	}

	.active::before {
		content: '';
		position: absolute;
		border-left: 8rpx solid #e41f19;
		height: 30rpx;
		left: 0;
	}

	/* 左侧导航布局 end*/

	.right-box {
		width: 100%;
		position: fixed;
		padding-left: 220rpx;
		box-sizing: border-box;
		left: 0;
		/* #ifdef H5 */
		padding-bottom: 100rpx;
		/* #endif */
	}

	.page-view {
		width: 100%;
		overflow: hidden;
		padding-top: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.class-item {
		background: #fff;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
	}

	.class-name {
		font-size: 26rpx;
		font-weight: bold;
	}

	.class-adv-image {
		width: 100%;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.g-container {
		/* padding-top: 20rpx; */
		display: flex;
		display: -webkit-flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.g-box {
		width: 33.3333%;
		text-align: center;
		padding-top: 40rpx;
	}

	.g-image {
		width: 120rpx;
		height: 120rpx;
	}

	.g-title {
		font-size: 22rpx;
	}
</style>
